<template>
  <div id="SoundEqData">
    <div class="queryClass">
      <a-select v-model="equipId" @change="getData" style="width: 180px" placeholder="请选择设备">
        <a-select-option
          v-for="item in equipList"
          :key="item.id"
          :value="item.id"
          >{{ item.name }}</a-select-option
        >
      </a-select>
    </div>
    <div class="SoundEq1">
      <div class="SoundEq1Title">气囊压力</div>
      <a-table
        :columns="potColumn"
        class="bigTable"
        :data-source="potTableData"
        :pagination="false"
      >
      </a-table>
    </div>
    <div class="SoundEq2">
      <div class="SoundEq2Title">位移</div>
      <a-table
        :columns="displaceColumn"
        class="bigTable"
        :data-source="displaceTableData"
        :pagination="false"
      >
      </a-table>
    </div>
    <div class="SoundEq3">
      <div class="SoundEq3_a">
        <div class="SoundEq3ATitle">其他数据</div>
        <a-table
          :columns="otherColumn"
          class="SoundEq3TableA"
          :data-source="otherTableData"
          :pagination="false"
        >
        </a-table>
      </div>
      <div class="SoundEq3_b">
        <div class="SoundEq3BTitle">纵角</div>
        <a-table
          :columns="angleColumns"
          class="SoundEq3TableB"
          :data-source="angleTableData"
          :pagination="false"
        ></a-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
      equipId: "",
      equipList:[],
      potColumn:[],//气囊
      potTableData:[],//气囊
      displaceColumn:[],//位移
      displaceTableData:[],//位移
      otherColumn:[],//其他
      otherTableData:[],//其他
      angleColumns: [],//纵角
      angleTableData: [],//纵角
      timer:null,
    };
  },
  created() {
    this.getEquipList();
  },
  mounted() {
    this.timer=setInterval(()=>{
      if (this.equipId) {
        this.getData();
      }
    },10000)
  },
  beforeDestroy(){
    if (this.timer) {
      clearInterval(this.timer);
    }
    this.timer=null;
  },
  methods: {
    getEquipList() {
      this.$axios.get("/modbus/equip/options").then((res) => {
        if (res.code == 200) {
          this.equipList = res.data;
          this.equipId=res.data[0].id;
          this.getData();
        }
      });
    },
    getData() {
      this.$axios
        .get("/modbus/data/rt/data", {
          params: {
            equipId: this.equipId,
          },
        })
        .then((res) => {
          if (res.code==200) {
            //气囊
            this.potColumn=res.data.pot.columnData;
            this.potTableData=res.data.pot.tableData;
            //位移
            this.displaceColumn=res.data.displace.columnData;
            this.displaceTableData=res.data.displace.tableData;
            //其他
            this.otherColumn=res.data.other.columnData;
            this.otherTableData=res.data.other.tableData;
            //纵角
            this.angleColumns=res.data.angle.columnData;
            this.angleTableData=res.data.angle.tableData;
          }
          console.log(res);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
#SoundEqData {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  .queryClass {
    position: absolute;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
  }
  .SoundEq1 {
    width: 670px;
    height: 740px;
    margin-top: 50px;
    position: relative;
    background-image: url("~@/assets/img/SoundEq1.png");
    background-size: cover;
    /* 背景图缩放以完整显示 */
    background-repeat: no-repeat;
    /* 防止背景图重复 */
    background-position: center;

    /* 将背景图居中显示 */
    .SoundEq1Title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 22px;
      color: white;
      font-family: "KaiTi", "楷体", serif;
    }
  }

  .SoundEq2 {
    width: 670px;
    height: 740px;
    margin-top: 50px;
    position: relative;
    background-image: url("~@/assets/img/SoundEq1.png");
    background-size: cover;
    /* 背景图缩放以完整显示 */
    background-repeat: no-repeat;
    /* 防止背景图重复 */
    background-position: center;

    /* 将背景图居中显示 */
    .SoundEq2Title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 22px;
      color: white;
      font-family: "KaiTi", "楷体", serif;
    }
  }

  .SoundEq3 {
    margin-top: 50px;

    .SoundEq3_a {
      width: 360px;
      height: 580px;
      background-image: url("~@/assets/img/SoundEq3_a.png");
      background-size: contain;
      /* 背景图缩放以完整显示 */
      background-repeat: no-repeat;
      /* 防止背景图重复 */
      background-position: center;
      /* 将背景图居中显示 */
      position: relative;

      .SoundEq3ATitle {
        position: absolute;
        left: 38%;
        font-size: 22px;
        color: white;
        font-family: "KaiTi", "楷体", serif;
      }
    }

    .SoundEq3_b {
      width: 360px;
      height: 160px;
      background: url("~@/assets/img/SoundEq3_b.png");
      background-size: contain;
      /* 背景图缩放以完整显示 */
      background-repeat: no-repeat;
      /* 防止背景图重复 */
      background-position: center;
      /* 将背景图居中显示 */
      position: relative;

      .SoundEq3BTitle {
        position: absolute;
        left: 45%;
        font-size: 22px;
        color: white;
        font-family: "KaiTi", "楷体", serif;
      }
    }
  }
}
</style>
<style lang="scss">
#SoundEqData {
  .ant-table-wrapper {
    width: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
  }

  .ant-table-thead {
    th {
      background: #0e344e !important;
      color: white !important;
    }
  }

  .bigTable {
    .ant-table-body {
      width: 112%;
      margin-left: -6%;
      height: 680px;
      /* 设置表格的最小高度 */
      background: #0e344e !important;
      overflow-y: auto !important;
    }
  }

  .SoundEq3TableA {
    .ant-table-body {
      height: 530px !important;
      background: #0e344e !important;
      overflow-y: auto !important;
    }
  }
  .SoundEq3TableB {
    margin-top: 30px;
    .ant-table-body {
      height: 106px !important;
      background: #0e344e !important;
      overflow-y: auto !important;
    }
  }
  .ant-table-placeholder {
    height: 80px !important;
    min-height: 80px !important;
    background: #0e344e !important;
    border-bottom: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8%;
    .ant-empty-normal {
      margin: 0 !important;
    }
    .ant-empty-description {
      color: white;
    }
  }
}
</style>